<template>
  <div>
    <div class="top">你的购物袋总计RMB</div>
    <br />
    <transition name="fade-transform">
    <div class="top-1" v-if="joker">8,499。</div>
    </transition>
    <div class="top-2">所有订单均可享受免费送货和退货服务。</div>
    <button class="buy">结账</button>
    <div><br /><br /><br /></div>
        <transition name="fade-transform">
    <div v-if="joker" key="box1">
    <hr />
    <br /><br /><br /><br /><br /><br />

      <div class="go">
        <img class="OG" src="./img/iphone-12-pro-graphite-hero.png" />
        <h1 class="HK">iPhone 12 <br /></h1>
      </div>
      <br />
      <div class="lop">
        <div class="dk">
          <select class="mun">
            <OPtion>1</OPtion>
            <OPtion>2</OPtion>
            <OPtion>3</OPtion>
            <OPtion>4</OPtion>
            <OPtion>5</OPtion>
          </select>
        </div>
        <div class="mank">RMB8,499</div>
        <div class="hid">
          <button class="OM" @click="light" >显示产品详情</button>
        </div>
        <div class="tid">
          <button class="OM" @click="REMOVE" v-if="joker">移除</button>
        </div>
      </div>
    </div>
    </transition>
    <br /><br />
    <hr />
    <br />
    <div>
      <img class="DP" src="./img/two.png" />
      <h3 class="AP">添加 AppleCare+服务计划(适用于iMac)-</h3>
      <h3 class="CP" v-if="joker">RMB8,499</h3>
      <div class="MP">
        <button class="OM" @click="add" v-if="show">添加</button>
        <button class="OM" @click="remove" v-if="!show">移除</button>
      </div>
      <div class="BP">获得长达3年的专家技术支持。</div>
      <div class="KP">
        <button class="OM" @click="run" v-if="show">进一步了解</button>
      </div>
    </div>
    <br />
    <hr />
    <br />
    <div>
      <img class="PL" src="./img/three.png" />
      <div class="PK">
        <h3 class="PO">添加礼品赠言</h3>
        <div class="PJ">
          <button class="OM">添加</button>
        </div>
      </div>
    </div>
    <br />
    <hr />
    <br />
    <!-- <div>
      <h3 class="AD">总计</h3>
      <h3 class="AS">RMB114514</h3>
      <button class="buy">结账</button>
    </div> -->
    <!-- <br /> -->
    <!-- <br /> -->
    <!-- <hr /> -->
    <!-- <br /> -->
    <div>
      <h6 style="padding-left: 20px">
        需要更多帮助?立即在线交流或致电 400-666-8800。
      </h6>
    </div>
    <br />
    <hr />
    <br />
    <br />
    <div class="MPG">
      <h2>为你推荐。</h2>
      <div class="KKL">
        <img src="./img/nlo.png" />
        <button class="MMO">添加到购物袋</button>
      </div>
      <div class="KKL">
        <img src="./img/nmo.png" />
        <button class="MMO">添加到购物袋</button>
      </div>
      <div class="KKL">
        <img src="./img/nom.png" />
        <button class="MMO">添加到购物袋</button>
      </div>
      <button class="OM">显示更多产品</button>
    </div>
    <br />
    <br />
  </div>
</template>
<script>
export default {
  name: "shopping",
  data() {
    return {
      show: true,
      change: true,
      joker: true,
    };
  },
  methods: {
    REMOVE() {
      this.joker = false;
    },
    add() {
      this.show = false;
    },
    remove() {
      this.show = true;
    },
    light() {
      this.$router.push("/iphoneDetails");
    },
    run() {
      window.location.href = "https://www.apple.com.cn/support/products/mac/";
    },
  },
};
</script>
<style scoped>
.OG {
  width: 350px;
}
.MMO {
  font-size: 10px;
  color: white;
  border-radius: 8px;
  background-color: rgba(13, 89, 255, 0.904);
  width: 150px;
  height: 35px;
  border: 1px solid rgba(13, 89, 255, 0.904);
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.KKL {
  float: left;
  width: 248px;
  height: 302px;
}
.MPG {
  text-align: center;
  width: 768px;
}
.AD {
  float: left;
  margin-left: 25px;
}
.AS {
  float: left;
  margin-left: 550px;
}
.PJ {
  margin-left: 700px;
}
.PO {
  float: left;
}
.PK {
  width: 303px;
  display: inline;
}
.PL {
  float: left;
  margin-left: 20px;
}
.KP {
  text-align: center;
  justify-content: center;
}
.fade-transform-leave-active, .fade-transform-enter-active{ 
  transition:all 1.4s;
}
.fade-transform-enter{ 
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transform-leave-to{ 
  opacity: 0;
  transform: translateX(30px);
}
.BP {
  display: flex;
  font-size: 12px;
  /* margin-left: -110px; */
  text-align: center;
  justify-content: center;
}

.MP {
  text-align: center;
  justify-content: center;
}
.CP {
  display: flex;
  margin-left: 350px;
  /* text-align: center;
  justify-content: center; */
}
.AP {
  float: flex;
  margin-left: 270px;
  /* width: 240px; */
  /* text-align: center; */
}
.DP {
  float: left;
  margin-left: 20px;
}
.lop {
  display: inline-block;
}
.tid {
  float: left;
  margin-left: 230px;
}
.OM {
  background-color: white;
  border: 1px solid white;
  color: rgb(0, 183, 255);
  font-size: 15px;
  font-weight: 700;
}
.hid {
  float: left;
  margin-left: 20px;
}
.HK {
  margin-left: 30px;
}
.go {
  margin-left: 200px;
}
.dk {
  float: left;
  margin-left: 40px;
}
.mank {
  float: left;
  font-size: 20px;
  font-weight: 700;
  margin-left: 150px;
}
.mun {
  margin-right: 10px;
  font-size: 15px;
  border: none;
}
.buy {
  margin-top: 30px;
  margin-left: 200px;
  font-size: 20px;
  color: white;
  border-radius: 8px;
  background-color: rgba(13, 89, 255, 0.904);
  width: 350px;
  height: 35px;
  border: 1px solid whitesmoke;
  border: 1px solid rgba(13, 89, 255, 0.904);
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.top {
  margin-top: 70px;
  font-size: 27px;
  font-weight: 700;
  text-align: center;
}
.top-1 {
  font-size: 27px;
  font-weight: 700;
  text-align: center;
}
.top-2 {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin-top: 20px;
}
.HK {
  text-align: center;
  margin-left: -250px;
}
</style>
